<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局变量及局部变量</title>
</head>
<body>
    <input type="button" value="开启定时器" class="btn">
    <script>
        let idx = 1 // 情况1, 点一下后,先看看效果,再点一下,再看看效果.
        // 问题是: 若开启多个定时器,那么同时操作一个变量,会出现间隔越来越短
        // 解决方案: 开启定时器前,先清除上一次的定时器
        let timer // 全局变量,保证点击时触发函数内用到的timer是同个变量,这样才能清除上一次的定时器
        document.querySelector('.btn').onclick = function(){
            clearInterval(timer)
            timer = setInterval(function(){
                console.log(idx)
                idx++
            }, 2000)
        }

        // 每次调用函数,就会存在局部作用域.在该作用域let声明的函数,只在该作用域才生效


       
    </script> 
</body>
</html>